<%@ page language="java"  pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  <script type="text/javascript" charset="utf-8">
  $(function() {
	    chartFun=function(){
	    	var createdatetimeStart=$('#admin_salechart_searchForm input[name="createdatetimeStart"]').val();
	    	var createdatetimeEnd=$('#admin_salechart_searchForm input[name="createdatetimeEnd"]').val();
	    	$.ajax({
	        type : "POST",
	        dataType : 'JSON',
	        data :{
	        	createdatetimeStart : createdatetimeStart,
	        	createdatetimeEnd : createdatetimeEnd 	
	        },
	        url : " ${pageContext.request.contextPath}/saleChartAction!saleHighChart.action",
	        success : function(result) {
	            new Highcharts.Chart({
	                chart : {
	                    renderTo : 'columnContainer', // 放置图表的DIV容器对应的id属性
	                    /* backgroundColor: {
	                        linearGradient: [0, 0, 500, 500],
	                        stops: [
	                            [0, 'rgb(255, 255, 255)'],
	                            [1, 'rgb(200, 200, 255)']
	                        ]
	                    }, */
	                    type : 'column', // 图表类型line, spline, area, areaspline,column, bar, pie , scatter
	                    width : 500,
	                    height : 400
	                },
	                title : {
	                    text : '月度销售额柱状图形报表' // 图表标题
	                },
	                subtitle : {
	                    text : 'EAT IT' // 副标题
	                },
	                xAxis : {   
	                	type: 'category' // x轴
	                },
	                credits : {
	                    text : 'EAT IT', // 设置LOGO区文字
	                },
	                exporting : {
	                    enabled : true
	                },
	                yAxis : {
	                    min : 0,
	                    title : {
	                        text : '销售额 (元)'
	                    }
	                },
	                legend : {
	                    layout : 'vertical',
	                    backgroundColor : '#808080',
	                    align : 'right',
	                    verticalAlign : 'middle',
	                    x : 100,
	                    y : 70,
	                    floating : true,
	                    shadow : true
	                },
	                tooltip : {	  //当鼠标悬置数据点时的格式化提示
	                    formatter : function() {
	                        return '' + this.x + '月: ' + this.y + '元';
	                    }
	                },
	                plotOptions : {
	                    column : {
	                        dataLabels : {
	                            enabled : true
	                        },
	                        pointPadding : 0.2,
	                        borderWidth : 0
	                    }
	                },
	                series :result
	            });
	            new Highcharts.Chart({
	                chart : {
	                    renderTo : 'splineContainer', // 放置图表的DIV容器对应的id属性
	                    /* backgroundColor: {
	                        linearGradient: [0, 0, 500, 500],
	                        stops: [
	                            [0, 'rgb(255, 255, 255)'],
	                            [1, 'rgb(200, 200, 255)']
	                        ]
	                    }, */
	                    type : 'spline', // 图表类型line, spline, area, areaspline,column, bar, pie , scatter
	                    width : 500,
	                    height : 400
	                },
	                title : {
	                    text : '月度销售额曲线图形报表' // 图表标题
	                },
	                subtitle : {
	                    text : 'EAT IT' // 副标题
	                },
	                xAxis : {   
	                	type: 'category' // x轴
	                },
	                credits : {
	                    text : 'EAT IT', // 设置LOGO区文字
	                },
	                exporting : {
	                    enabled : true
	                },
	                yAxis : {
	                    min : 0,
	                    title : {
	                        text : '销售额 (元)'
	                    }
	                },
	                legend : {
	                    layout : 'vertical',
	                    backgroundColor : '#808080',
	                    align : 'right',
	                    verticalAlign : 'middle',
	                    x : 100,
	                    y : 70,
	                    floating : true,
	                    shadow : true
	                },
	                tooltip : {	  //当鼠标悬置数据点时的格式化提示
	                    formatter : function() {
	                        return '' + this.x + '月: ' + this.y + '元';
	                    }
	                },
	                plotOptions : {
	                    column : {
	                        dataLabels : {
	                            enabled : true
	                        },
	                        pointPadding : 0.2,
	                        borderWidth : 0
	                    }
	                },
	                series :result
	            });
	        }
	    });
	   };
	});
</script>
<div class="easyui-layout" data-options="border:false,fit:true">
<div region="north" data-options="border:false,title:'过滤信息'" style="height:60px;overflow:hidden;">
<form id="admin_salechart_searchForm" method="post"  style="padding:5px 0px;">
&nbsp;&nbsp;<label style="font-weight:bold;">时间&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;从&nbsp;</label><input name="createdatetimeStart"  class="easyui-datebox" /><label style="font-weight:bold;">&nbsp;至&nbsp;</label><input name="createdatetimeEnd" class="easyui-datebox" />
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="chartFun();" >显示报表</a>
</form>
</div>
<div region="center" data-options="fit:true">
<div id="columnContainer" style="margin: 0 auto;float:left;"></div>
<div id="splineContainer" style="margin: 0 auto;float:right;"></div>
</div>
</div>

